<template>
    <div>
        <div class="applicationMoreServiceBox">
            <div class="applicationMoreServiceItem">
                <div class="applicationMoreServiceItem_img">
                    <img src="~BUSSINESS_IMAGE/images/test_5.png" />
                    <div class="applicationMoreServiceItem_desc">更多权限，更大空间</div>
                </div>
                <div class="applicationMoreServiceItem_info">
                    <div class="applicationMoreServiceItem_infoText">云应用配额升级服务</div>
                    <div class="applicationMoreServiceItem_infoBtn">详细了解</div>
                </div>
            </div>
            <div class="applicationMoreServiceItem">
                <div class="applicationMoreServiceItem_img">
                    <img src="~BUSSINESS_IMAGE/images/test_4.png" />
                    <div class="applicationMoreServiceItem_desc">更多定制功能，打造属于您的专属定制服务</div>
                </div>
                <div class="applicationMoreServiceItem_info">
                    <div class="applicationMoreServiceItem_infoText">云服务二次开发</div>
                    <div class="applicationMoreServiceItem_infoBtn">详细了解</div>
                </div>
            </div>
            <div class="applicationMoreServiceItem">
                <div class="applicationMoreServiceItem_img">
                    <img src="~BUSSINESS_IMAGE/images/test_6.png" />
                    <div class="applicationMoreServiceItem_desc">线下部署，快速迁移，安全便捷</div>
                </div>
                <div class="applicationMoreServiceItem_info">
                    <div class="applicationMoreServiceItem_infoText">企业线下部署服务</div>
                    <div class="applicationMoreServiceItem_infoBtn">详细了解</div>
                </div>
            </div>
            <div class="applicationMoreServiceItem">
                <div class="applicationMoreServiceItem_img">
                    <img src="~BUSSINESS_IMAGE/images/test_7.png" />
                    <div class="applicationMoreServiceItem_desc">免费下载，灵活部署</div>
                </div>
                <div class="applicationMoreServiceItem_info">
                    <div class="applicationMoreServiceItem_infoText">云服务下载</div>
                    <div class="applicationMoreServiceItem_infoBtn">详细了解</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            // ...mapState({ })
        },
        //组件方法
        methods: {
           
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.applicationMoreServiceBox {
    width 100%
    height auto
    margin-top -35px
    display flex
    flex-wrap wrap
    justify-content space-between  

    .applicationMoreServiceItem {
        width 32.5%
        height 300px
        border-radius 5px
        border 1px solid #eee  
        box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
        position relative  
        margin-bottom 15px
        overflow hidden    

        .applicationMoreServiceItem_img {
            width 100%
            height 240px
            background #eee
            position relative

            .applicationMoreServiceItem_desc {
                position absolute
                bottom 0px
                left 0px
                right 0px
                height 50px
                background-color rgba(0,0,0,0.5)
                color #f5f5f5
                line-height 20px
                padding 15px
                box-sizing border-box
            }

            img {
                width 100%
                height 100%
                object-fit cover
            }
        }

        .applicationMoreServiceItem_info {
            width 100%
            height 60px
            float left
            background #fff
            border-top 1px solid #eee
            font-size 18px   
            text-align center 
            line-height 60px

            .applicationMoreServiceItem_infoText {
                width 240px
                height 60px
                float left    
            }

            .applicationMoreServiceItem_infoBtn {
                position absolute
                left 240px
                bottom 0px
                right 0px
                top 240px
                btnStyle(60px)    
            }
        }
    }
}
</style>